<template>
    <div class="container">
        <!--    ============================= 页面顶部header ==============================    -->
        <div class="header">
            <div class="header_top">
                <div class="pageTitle">创翔综合智慧平台商家端</div>
                <div class="login" @click="login">登录</div>
            </div>
        </div>
        <!--    ============================= 页面顶部header ==============================    -->
        <div class="content">
            <!--      进度条      -->
            <div class="progress">
                <div class="pic">
                    <img src="../../asset/login/s@3x.png" alt="">
                    <span>公司资质信息</span>
                </div>
                <div class="jiange" :class="progressIndex >= 2 ? 'active' : ''"></div>
                <div class="pic">
                    <img v-if="progressIndex >= 2" src="../../asset/login/s@3x.png" alt="">
                    <img v-if="progressIndex < 2" src="../../asset/login/n@3x.png" alt="">
                    <span>注册信息</span>
                </div>
                <div class="jiange" :class="progressIndex > 2 ? 'active' : ''"></div>
                <div class="pic">
                    <img v-if="progressIndex >= 3" src="../../asset/login/s@3x.png" alt="">
                    <img v-if="progressIndex < 3" src="../../asset/login/n@3x.png" alt="">
                    <span>店铺开通</span>
                </div>
            </div>
            <!--      公司资质信息      -->
            <div v-if="progressIndex === 1" class="componyMsg">
                <div class="contactPerson">
                    <div class="title">公司及联系人信息</div>
                    <div class="biaodan">
                        <a-form :form="form" action="" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
                            <a-row>
                                <a-col
                                    :md="12"
                                    :sm="24"
                                >
                                    <a-form-item label="企业名称">
                                        <a-input
                                            v-model="registerData.store_name"
                                            v-decorator="['store_name', { rules: [{ required: true, message: '请输入企业名称！' }] }]"
                                        />
                                    </a-form-item>
                                </a-col>
                                <!--<a-col
                                    :md="12"
                                    :sm="24"
                                >
                                    <a-form-item label="统一社会信用代码">
                                        <a-input
                                            v-model="registerData.business_license_no"
                                            v-decorator="['note', { rules: [{ required: true, message: '请输入统一社会信用代码！' }] }]"
                                        />
                                    </a-form-item>
                                </a-col>-->
                                <a-col
                                    :md="12"
                                    :sm="24"
                                >
                                    <a-form-item label="法人代表">
                                        <a-input
                                            v-model="registerData.legal_person"
                                            v-decorator="['legal_person', { rules: [{ required: true, message: '请输入法人代表！' }] }]"
                                        />
                                    </a-form-item>
                                </a-col>
                                <a-col
                                    :md="12"
                                    :sm="24"
                                >
                                    <a-form-item label="企业详细地址">
                                        <a-input
                                            v-model="registerData.store_address"
                                            v-decorator="['store_address', { rules: [{ required: true, message: '请输入企业详细地址！' }] }]"
                                        />
                                    </a-form-item>
                                </a-col>
                                <a-col
                                    :md="12"
                                    :sm="24"
                                >
                                    <a-form-item label="注册资本">
                                        <a-input
                                            v-model="registerData.registered_capital"
                                            v-decorator="['registered_capital', { rules: [{ required: true, message: '请输入注册资本！' }] }]"
                                        />
                                    </a-form-item>
                                </a-col>
                                <a-col
                                    :md="12"
                                    :sm="24"
                                >
                                    <a-form-item label="成立日期">
                                        <a-date-picker
                                            v-model="registerData.date_of_establishment"
                                            style="width: 100%"
                                            placeholder="请选择成立日期"
                                            v-decorator="['date_of_establishment', { rules: [{ required: true, message: '请选择成立日期！' }] }]"
                                        />
                                    </a-form-item>
                                </a-col>
                                <a-col
                                    :md="12"
                                    :sm="24"
                                >
                                    <a-form-item label="联系人">
                                        <a-input
                                            v-model="registerData.emergency_contact"
                                            v-decorator="['emergency_contact', { rules: [{ required: true, message: '请输入联系人！' }] }]"
                                        />
                                    </a-form-item>
                                </a-col>
                                <a-col
                                    :md="12"
                                    :sm="24"
                                >
                                    <a-form-item label="电子邮箱">
                                        <a-input
                                            v-model="registerData.email"
                                            type="email"
                                            v-decorator="['email', { rules: [{ required: true, message: '请输入电子邮箱！' }] }]"
                                        />
                                    </a-form-item>
                                </a-col>
                                <a-col
                                    :md="12"
                                    :sm="24"
                                >
                                    <a-form-item label="联系电话">
                                        <a-input
                                            v-model="registerData.emergency_contact_phone"
                                            v-decorator="['emergency_contact_phone', { rules: [{ required: true, message: '请输入联系电话！' }] }]"
                                        />
                                    </a-form-item>

                                    <a-form-item label="客服联系电话">
                                        <a-input
                                            v-model="registerData.customer_server_phone"
                                            v-decorator="['customer_server_phone', { rules: [{ required: true, message: '请输入客服联系电话！' }] }]"
                                        />
                                    </a-form-item>

                                </a-col>
                            </a-row>
                            <a-row>
                                <a-col
                                    :md="12"
                                    :sm="24"
                                >
                                    <div class="title">营业执照信息</div>
                                    <a-form-item label="营业执照号">
                                        <a-input
                                            v-model="registerData.business_license_no"
                                            v-decorator="['business_license_no', { rules: [{ required: true, message: '请输入营业执照号！' }] }]"
                                        />
                                    </a-form-item>
                                    <a-form-item label="营业执照有效期">
                                        <a-range-picker
                                            v-model="registerData.valid_period"
                                            v-decorator="['valid_period', { rules: [{ required: true, message: '请选择营业执照有效期！' }] }]"
                                            style="width: 100%"
                                        />
                                    </a-form-item>
                                    <a-form-item label="营业执照电子版">
                                        <a-upload
                                            list-type="picture-card"
                                            class="avatar-uploader"
                                            :show-upload-list="false"
                                            action="http://community.chuangxiangdianli.com/api/Seller/uploadImage"
                                            @change="handleChange"
                                        >
                                            <img v-if="imageUrl" :src="imageUrl" alt="" width="100px" height="auto"/>
                                            <div v-else>
                                                <a-icon :type="loading ? 'loading' : 'plus'"/>
                                                <div class="ant-upload-text">
                                                    点击上传
                                                </div>
                                            </div>
                                        </a-upload>
                                        <span style="font-size: 16px; color: #666666">请确保图片清晰，文字可辨并有清晰的红色公章</span>
                                    </a-form-item>
                                </a-col>
                                <a-col
                                    :md="12"
                                    :sm="24"
                                >
                                    <div class="title">&ensp;&ensp;一般纳税人证明 <span
                                        class="attend">注：所属企业具有一般纳税人证明时，此项为必填</span></div>
                                    <a-form-item label="一般纳税人证明">
                                        <a-upload
                                            list-type="picture-card"
                                            class="avatar-uploader"
                                            :show-upload-list="false"
                                            action="http://community.chuangxiangdianli.com/api/Seller/uploadImage"
                                            @change="handleChange1"
                                        >
                                            <img v-if="imageUrl1" :src="imageUrl1" alt="avatar" width="100px"
                                                 height="auto"/>
                                            <div v-else>
                                                <a-icon :type="loading1 ? 'loading' : 'plus'"/>
                                                <div class="ant-upload-text">
                                                    点击上传
                                                </div>
                                            </div>
                                        </a-upload>
                                        <span style="font-size: 16px; color: #666666">请确保图片清晰，文字可辨并有清晰的红色公章</span>
                                    </a-form-item>
                                </a-col>
                            </a-row>
                            <div class="btn" @click="nextStep">下一步</div>
                        </a-form>
                    </div>
                </div>
            </div>
            <!--      注册信息      -->
            <div v-if="progressIndex === 2" class="componyMsg">
                <div class="zhuceMsg">
                    <div class="title" @click="progressIndex = 1">注册信息</div>
                    <a-form :form="form1" action="" :label-col="{ span: 4 }" :wrapper-col="{ span: 16 }">
                        <a-row>
                            <a-col
                                :md="24"
                                :sm="24"
                            >
                                <a-form-item label="手机号码">
                                    <a-input
                                        v-model="registerData.phone"
                                        style="height: 50px; margin-top: -5px;"
                                        v-decorator="['note', { rules: [{ required: true, message: '请输入手机号码！' }] }]"
                                    />
                                </a-form-item>
                            </a-col>
                            <a-col
                                :md="24"
                                :sm="24"
                                style="margin:15px 0"
                            >
                                <a-form-item label="验证码" style="margin-top: -5px;">
                                    <a-input
                                        v-model="registerData.code"
                                        style="width: 334px;height:50px; margin-top:-5px;"
                                        v-decorator="['code', { rules: [{ required: true, message: '请输入验证码！' }] }]"
                                    />
                                    <a-button @click="changeCountdown" class="countBtn">{{ countdown }}</a-button>
                                </a-form-item>
                            </a-col>
                            <a-col
                                :md="24"
                                :sm="24"
                            >
                                <a-form-item label="输入密码">
                                    <a-input
                                        v-if="showFlag"
                                        v-model="registerData.password"
                                        style="height: 50px; margin-top: -5px;"
                                        v-decorator="['password', { rules: [{ required: true, message: '请输入密码！' }] }]"
                                        @blur="yz"
                                    />
                                </a-form-item>
                            </a-col>
                            <a-col
                                :md="24"
                                :sm="24"
                                style="margin:15px 0"
                            >
                                <a-form-item label="确认密码">
                                    <a-input
                                        v-model="confirmPassword"
                                        @pressEnter="submit"
                                        style="height: 50px; margin-top: -5px;"
                                    />
                                </a-form-item>
                            </a-col>
                            <a-col
                                :md="24"
                                :sm="24">

                                <a-form-model-item label="所属小区">
                                    <a-select
                                        v-model="registerData.community_id"
                                        placeholder="请选择"
                                        default-value="0">
                                        <a-select-option :value="0">请选择</a-select-option>
                                        <a-select-option :value="item.community_id" v-for="item in community"
                                                         :key="item.community_id">
                                            {{ item.community_name }}
                                        </a-select-option>
                                    </a-select>
                                </a-form-model-item>

                                <a-form-model-item label="店铺所属分类">
                                    <a-select v-model="registerData.class_id" placeholder="请选择" default-value="0">
                                        <a-select-option :value="0">请选择</a-select-option>
                                        <a-select-option :value="d.id" v-for="d in cate" :key="d.id">
                                            {{ d.cate_name }}
                                        </a-select-option>
                                    </a-select>
                                </a-form-model-item>

                            </a-col>
                        </a-row>
                        <div class="btn" @click="submit"
                             style="font-size:18px;width: 300px;margin-top: 30px;height: 40px; line-height: 40px;">提交
                        </div>
                    </a-form>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "login",
    data() {
        return {
            showFlag: true,
            // 上传图片回显
            imageUrl: '',
            loading: false,
            imageUrl1: '',
            loading1: false,
            form: this.$form.createForm(this),
            form1: this.$form.createForm(this),
            // 注册进度
            progressIndex: 1,
            // 倒计时文本
            countdown: '获取验证码',
            // 计时器flag
            timer: null,
            // 注册提交的数据
            registerData: {
                store_name: '', // 企业名称
                legal_person: '', // 法人代表
                store_address: '', // 详细地址
                registered_capital: '', // 注册资本
                date_of_establishment: '', // 成立日期
                emergency_contact: '', // 联系人
                email: '', // 邮箱
                emergency_contact_phone: '', // 联系电话
                business_license_no: '', // 统一信用代码
                business_license: '', // 营业执照     ---- 图片
                valid_period: '', // 营业执照有效期
                general_taxpayer_certificate: '', // 一般纳税人证明    ---- 图片
                phone: '', //  手机号
                password: '', // 密码
                code: '', // 验证码
                class_id: 0,
                community_id: 0,
                customer_server_phone: 0,
            },
            confirmPassword: '',
            cate: [],
            community: [],
        };
    },
    methods: {
        //     密码验证
        yz() {
            console.log('让我们大喊一声奥里给');
            let reg = new RegExp('^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,16}$');
            if (!reg.test(this.registerData.password)) {
                this.registerData.password = ''
                this.showFlag = false
                setTimeout(() => {
                    this.showFlag = true
                }, 100)
                console.log(this.registerData.password)
                this.$message.error({
                    content: '密码须同时还有字母和数字，且长度在8-16位之间',
                    duration: 4
                })
            }
        },
        //    点击提交
        submit() {
            if (!this.confirmPassword) {
                this.$message.warning('请输入确认密码');
                return
            }
            // 判断确认密码是不是和密码一样
            if (this.registerData.password != this.confirmPassword) {
                this.$message.warning('两次输入密码不一致');
                return;
            }

            if (this.registerData.community_id == 0) {
                this.$message.warning('请选择小区');
                return;
            }
            if (this.registerData.class_id == 0) {
                this.$message.warning('请选择分类');
                return;
            }

            this.form1.validateFields((errors, values) => {
                // console.log('奥里给',values)
                if (!errors) {
                    if (!this.confirmPassword) {
                        this.$message.warning('请输入确认密码');
                        return
                    }
                    // 判断确认密码是不是和密码一样
                    if (this.registerData.password != this.confirmPassword) {
                        this.$message.warning('两次输入密码不一致');
                        return;
                    }
                    //     开始注册
                    this.$post(this.$api.sellerRegister, this.registerData).then((res) => {
                        // console.log(res);
                        if (res.code == 500) {
                            this.$message.warning(res.msg);
                        } else {
                            this.$message.info(res.msg);
                        }
                    })
                }
            });
        },
        //    点击下一步
        nextStep() {
            // 解析时间
            var that = this
            console.log('打印form', this.form);
            this.form.validateFields((errors, values) => {
                // console.log(values)
                if (!errors) {
                    that.registerData.date_of_establishment = that.GMTToStr(that.registerData.date_of_establishment)
                    that.registerData.valid_period = that.GMTToStr(that.registerData.valid_period[0]) + ' - ' + that.GMTToStr(that.registerData.valid_period[1])
                    // console.log(that.registerData.valid_period);
                    this.progressIndex = 2
                }
            });
        },
        //   时间转化
        GMTToStr(time) {
            let date = new Date(time)
            let Str =
                (date.getFullYear() < 10 ? '0' + date.getFullYear() : date.getFullYear())
                + '-' +
                ((date.getMonth() + 1) < 10 ? '0' + (date.getMonth() + 1) : (date.getMonth() + 1))
                + '-' +
                (date.getDate() < 10 ? '0' + date.getDate() : date.getDate())
            return Str
        },
        //    验证码倒计时
        changeCountdown() {
            if (this.countdown != '获取验证码') return
            this.send_sms();
            this.countdown = 60
            var that = this
            this.timer = setInterval(function () {
                that.countdown = parseInt(that.countdown)
                console.log('操作了', that.countdown);
                if (that.countdown <= 0) {
                    clearInterval(that.timer)
                    that.timer = null
                    that.countdown = '获取验证码'
                    console.log('验证码过期，需要重新获取');
                    return
                } else {
                    that.countdown--
                    if (that.countdown < 10) {
                        that.countdown = '0' + that.countdown
                    }
                }
            }, 1000)
        },

        // 发送短信
        send_sms(){
            if(this.registerData.phone == ''){
                return this.$message.error('手机不能为空.');
            }
            if(this.math>0){
                return this.$message.error('不要频繁发送短信.');
            }

            // 发送
            this.$get(this.$api.homeSendSms,{phone:this.registerData.phone,name:'register'}).then(res=>{
                if(res.code == 200){
                    this.math = 60;
                    this.timeObj = setInterval(()=>{
                        this.math--;
                        this.code_text = this.math+'s'
                        if(this.math<=0){
                            this.code_text = '发送验证码'
                            clearInterval(this.timeObj);
                        }
                    },1000);
                }
                return this.$returnInfo(res);
            })


        },
        //     跳转登录页面
        login() {
            this.$router.push({name: 'seller_login'})
        },
        //   上传图片
        handleChange(info) {
            if (info.file.status === 'uploading') {
                this.loading = true;
                return;
            }
            if (info.file.status === 'done') {
                // Get this url from response in real world.
                console.log('上传成功返回数据', info.file.response);
                this.imageUrl = info.file.response.data.url
                this.registerData.business_license = info.file.response.data.url
                //console.log('返回的图片地址', this.registerData.business_license);
            }
        },
        handleChange1(info) {
            if (info.file.status === 'uploading') {
                this.loading1 = true;
                return;
            }
            if (info.file.status === 'done') {
                // Get this url from response in real world.
                //console.log('上传成功返回数据', info.file.response);
                this.imageUrl1 = info.file.response.data.url
                this.registerData.general_taxpayer_certificate = info.file.response.data.url
                //console.log('返回的图片地址', this.registerData.general_taxpayer_certificate);
            }
        }
    },

    created() {
        this.$post(this.$api.getDatas).then((res) => {
            this.cate = res.data.cate;
            this.community = res.data.community;
        });
    },


    mounted() {
    }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
* {
    margin: 0;
    padding: 0;
}

.ant-form-item-label {
    display: inline-block;
    height: 50px;
    white-space: nowrap;
    text-align: right;
    vertical-align: middle;
    font-size: 16px;
    line-height: 50px;
}

.avatar-uploader > .ant-upload {
    width: 128px;
    height: 128px;
    background: #fff;
}

.ant-upload-select-picture-card i {
    font-size: 32px;
    color: #999;
}

.ant-upload-select-picture-card .ant-upload-text {
    margin-top: 8px;
    color: #666;
}

.ant-col-md-24 {
    height: 60px;
}

.attend {
    font-size: 16px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #FF8A00;
    margin-left: 10px;
}

.container {
    width: 100%;
    height: 100%;
    background: url('../../asset/login/register_bg.png');
    background-size: 100%;
    margin: 0 auto;
}

.header {
    width: 100%;
    height: 96px;
    background-color: #F7F7F7;

    .header_top {
        margin: 0 auto;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        width: 1200px;
        heighgt: 100%;
        font-size: 36px;
        font-family: Source Han Sans CN;
        font-weight: bold;
        line-height: 96px;
        color: #32C19C;

        .login {
            cursor: pointer;
            font-size: 24px;
            font-family: Source Han Sans CN;
            font-weight: 500;
        }
    }
}

.content {
    width: 1200px;
    margin: 0 auto;

    .progress {
        margin: 13px auto;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        width: 698px;
        height: 27px;
        margin-bottom: 76px;

        .pic {
            position: relative;
            height: 27px;
            width: 27px;

            & > img {
                display: block;
                width: 100%;
                height: 100%;
            }

            & > span {
                position: absolute;
                left: -40px;
                bottom: -40px;
                margin: auto;
                font-size: 18px;
                width: 107px;
                text-align: center;
                white-space: nowrap;
                font-family: Source Han Sans CN;
                font-weight: 500;
                color: #666666;
            }
        }

        .jiange {
            height: 2px;
            width: 303px;
            background-color: #999999;
        }

        .active {
            background-color: #46C5A3;
        }
    }

    .componyMsg {
        width: 100%;
        padding: 0 26px;
        box-sizing: border-box;

        .contactPerson {
            .title {
                margin-bottom: 26px;
                font-size: 20px;
                font-family: Source Han Sans CN;
                font-weight: bold;
                color: #333333;
            }

            .biaodan {
                font-size: 16px;
                font-family: Source Han Sans CN;
                font-weight: 400;
                color: #333333;
            }
        }

        .zhuceMsg {
            width: 639px;
            margin: 0 auto;

            .title {
                margin-bottom: 26px;
                font-size: 20px;
                font-family: Source Han Sans CN;
                font-weight: bold;
                color: #333333
            }

        }
    }
}

.btn {
    margin: 20px auto 0;
    width: 444px;
    height: 64px;
    background: linear-gradient(-47deg, #70DAC4, #3EC4A7);
    box-shadow: 2px 8px 9px 0px rgba(138, 138, 138, 0.12);
    border-radius: 32px;
    text-align: center;
    line-height: 64px;
    font-size: 23px;
    font-family: Source Han Sans CN;
    font-weight: 500;
    color: #FFFFFF;
    cursor: pointer;
}

.countBtn {
    width: 92px;
    height: 50px;
    border: none;
    background: #46C5A3;
    color: #ffffff;
}
</style>

